<div>

    <div class="ibox">
        <div class="ibox-title">
            <h5>
                <span>
                    <vc:i18n name="订单收费" namespace="payFeeOrder"></vc:i18n>
                </span>({{payFeeOrderInfo.payerObjName}}
                <span @click="_viewRoomData()" v-if="payFeeOrderInfo.payerObjType == '3333'">
                    <vc:create path="property/viewRoomData"></vc:create>
                </span> )
            </h5>
            <div class="ibox-tools" style="top:10px;">
                <button type="button" class="btn btn-primary btn-sm" style="margin-left:10px" v-on:click="vc.goBack()">
                    <i class="fa fa-times"></i>
                    <vc:i18n name="返回" namespace="payFeeOrder"></vc:i18n>
                </button>
            </div>
        </div>
        <div class="ibox-content">
            <div class="row">
                <div class="col-7" style="border-right: solid #f4f4f4 2px;padding-left: 30px;">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="费用ID:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4 " @click="_viewFee()">
                            <label class=" col-form-label hand ">{{payFeeOrderInfo.feeId}}</label>
                            <span>
                                <vc:create path="property/viewFeeData"></vc:create>
                            </span>
                        </div>
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="费用项目:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4 " @click="_viewFeeConfig()">
                            <label class=" col-form-label hand ">{{payFeeOrderInfo.feeName}}</label>
                            <span>
                                <vc:create path="property/viewFeeConfigData"></vc:create>
                            </span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="费用类型:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class=" col-form-label ">{{payFeeOrderInfo.feeTypeCdName}}</label>
                        </div>
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="计费起始时间:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class=" col-form-label ">{{payFeeOrderInfo.endTime}}</label>
                        </div>
                    </div>
                    <div class="form-group row" v-if="payFeeOrderInfo.builtUpArea">
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="面积:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class="col-form-label ">{{payFeeOrderInfo.builtUpArea}}</label>
                        </div>
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="单价:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class="col-form-label ">{{payFeeOrderInfo.squarePrice}}</label>
                        </div>
                    </div>

                    <div class="form-group row" v-if="payFeeOrderInfo.builtUpArea">
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="附加费:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class="col-form-label ">{{payFeeOrderInfo.additionalAmount}}</label>
                        </div>
                    </div>
                    <div class="form-group row" v-else>
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="固定费:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class=" col-form-label ">{{payFeeOrderInfo.additionalAmount}}</label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="业主账户:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class="col-form-label ">
                                <input type="checkbox" checked="checked" @change="_useUserAccountChange">
                            </label>
                        </div>

                        <label class="col-sm-2 col-form-label padding-l-60">
                            <vc:i18n name="赠送积分:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class="col-form-label ">
                                {{payFeeOrderInfo.integralQuantity}}
                            </label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label padding-l-60" style="line-height: 50px;padding-right:0px;">
                            <vc:i18n name="应收款:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class="col-form-label "
                                style="font-size: 30px;color: red;padding-left:0px;">￥{{payFeeOrderInfo.totalFeePrice}}</label>
                        </div>
                        <label class="col-sm-2 col-form-label padding-l-60" style="line-height: 50px;padding-right:0px;">
                            <vc:i18n name="应缴金额:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <label class="col-form-label "
                                style="font-size: 30px;color: red;padding-left:0px;">
                                ￥{{payFeeOrderInfo.accountAmount >= payFeeOrderInfo.receivedAmount ? '0.00' :
                                (payFeeOrderInfo.receivedAmount - payFeeOrderInfo.accountAmount).toFixed(2)}}
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-4" style="padding-left: 30px;">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">
                            <vc:i18n name="缴费时间:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-8">
                            <input v-model="payFeeOrderInfo.createTime" type="text"
                                :placeholder="vc.i18n('必填，请填写缴费时间','payFeeOrder')" readonly
                                class="col-form-label payFeeOrderCreateTime" style="border: none; outline: none;">
                        </div>
                    </div>
                    <div class="form-group row" v-if="payFeeOrderInfo.feeFlag != '2006012'">
                        <label class="col-sm-2 col-form-label">
                            <vc:i18n name="缴费周期:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-8">
                            <select class="custom-select" v-model="payFeeOrderInfo.tempCycles"
                                @change="_changeMonth(payFeeOrderInfo.tempCycles)">
                                <option selected disabled value="">{{vc.i18n('请选择缴费周期','payFeeOrder')}}</option>
                                <option v-for="item in payFeeOrderInfo.paymentCycles" :value="item">
                                    {{item}}{{vc.i18n('个月','payFeeOrder')}}
                                </option>
                                <option value="-102">{{vc.i18n('自定义周期','payFeeOrder')}}</option>
                                <option value="-101">{{vc.i18n('自定义金额','payFeeOrder')}}</option>
                                <option value="-103">{{vc.i18n('自定义结束时间','payFeeOrder')}}</option>
                                <option value="-105">{{vc.i18n('自定义时间段','payFeeOrder')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row" v-if="payFeeOrderInfo.tempCycles == '-102'">
                        <label class="col-sm-2 col-form-label">
                            <vc:i18n name="实际周期:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-8">
                            <input type="text" :placeholder="vc.i18n('请输入实际周期','payFeeOrder')"
                                v-model="payFeeOrderInfo.cycles" v-on:change="changeCycle(payFeeOrderInfo.cycles)"
                                class="form-control">
                        </div>
                    </div>
                    <div class="form-group row" v-show="payFeeOrderInfo.tempCycles == '-103'">
                        <label class="col-sm-2 col-form-label">
                            <vc:i18n name="结束时间:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-8">
                            <input type="text" :placeholder="vc.i18n('请选择缴费结束时间','payFeeOrder')"
                                v-model="payFeeOrderInfo.custEndTime" class=" form-control cust-endTime">
                        </div>
                    </div>
                    <div class="form-group row" v-show="payFeeOrderInfo.tempCycles == '-105'">
                        <label class="col-sm-2 col-form-label">
                            <vc:i18n name="缴费时间段:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-4">
                            <input type="text" :placeholder="vc.i18n('请选择缴费开始时间','payFeeOrder')"
                                v-model="payFeeOrderInfo.customStartTime" class=" form-control customStartTime">
                        </div>
                        <div class="col-sm-4">
                            <input type="text" :placeholder="vc.i18n('请选择缴费结束时间','payFeeOrder')"
                                v-model="payFeeOrderInfo.customEndTime" class=" form-control customEndTime">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-2 col-form-label" style="padding-right:0px;">
                            <vc:i18n name="支付方式:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-8">
                            <select class="custom-select" v-model="payFeeOrderInfo.primeRate">
                                <option selected disabled value="">
                                    {{vc.i18n('必填，请选择支付方式','payFeeOrder')}}
                                </option>
                                <option v-for="(item,index) in payFeeOrderInfo.primeRates" :key="index"
                                    v-if="item.statusCd != '5' && item.statusCd != '6' && item.statusCd != '8'" :value="item.statusCd">
                                    {{item.name}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">
                            <vc:i18n name="实收款:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-8">
                            <input type="text" :placeholder="vc.i18n('请输入实际收款金额','payFeeOrder')"
                                v-model="payFeeOrderInfo.receivedAmount" class="form-control"
                                v-if="payFeeOrderInfo.receivedAmountSwitch=='1'">
                            <label class="col-sm-8 col-form-label" v-if="payFeeOrderInfo.receivedAmountSwitch=='2'"
                                style="font-size: 15px;">
                                ￥{{payFeeOrderInfo.receivedAmount}}
                            </label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">
                            <vc:i18n name="备注:" namespace="payFeeOrder"></vc:i18n>
                        </label>
                        <div class="col-sm-8">
                            <textarea :placeholder="vc.i18n('可填，请填写备注','payFeeOrder')" class="form-control"
                                v-model="payFeeOrderInfo.remark">
                                    </textarea>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 30px;">
                        <div class="col-sm-5">
                            <button type="button" class="btn btn-success btn-lg btn-block"
                                v-if="payFeeOrderInfo.primeRate == '3' || payFeeOrderInfo.primeRate == '4'"
                                @click="_openPayFee('qrCode')">
                                <vc:i18n name="扫码收费" namespace="payFeeOrder"></vc:i18n>
                            </button>
                        </div>
                        <div class="col-sm-5">
                            <button type="button" class="btn btn-primary btn-lg btn-block"
                                v-if="payFeeOrderInfo.offlinePayFeeSwitch !='2'" @click="_openPayFee('common')">
                                <vc:i18n name="提交收费" namespace="payFeeOrder"></vc:i18n>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <vc:create path="property/payFeeUserAccount"></vc:create>
    <vc:create path="fee/payFeeDeposit"></vc:create>

    <vc:create path="property/payFeeOrderResult"></vc:create>
    <vc:create path="property/payFeeOrderConfirm"></vc:create>
    <vc:create path="property/payFeeDiscount"></vc:create>
    <vc:create path="property/payFeeCoupon"></vc:create>
    <vc:create path="property/prestoreAccount2"></vc:create>
</div>